<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createRef的形式的ref</title>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
       class Abc extends React.Component{

            // 不知道这里为啥报错了React.createRef is not a function
           constructor(props) {
               super(props);
               this.myRef = React.createRef()
               console.log('输出什么',this.myRef)
           }

           showData1 = ()=>{
               console.log('showData1',this.myRef)
           }
           showData2 = ()=>{
               console.log('showData2')
           }
           render(){
               return (
                   <div ref={this.myRef}>
                       <input  type="text" placeholder="点击按钮显示数据"/>
                       <button onClick={this.showData1}>按钮</button>
                       <input onBlur={this.showData2} type="text" placeholder="失去焦点显示数据"/>
                   </div>
               )
           }
       }
        ReactDOM.render(<Abc/>,document.getElementById('app'))




    </script>
</body>
</html>
